<!-- <template>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </div>
</template> -->


<template>
    <div class="p-6">
      <!-- 🎯 极简主题控制面板 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6 mb-6">
        <h2 class="text-xl font-bold mb-6">🚀 vilan-admin-v1 极简主题系统</h2>
        
        <!-- 主题模式切换 -->
        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3">主题模式</h3>
          <div class="flex gap-3">
            <el-button 
              v-for="option in themeModeOptions" 
              :key="option.value"
              @click="setThemeMode(option.value)"
              :type="themeMode === option.value ? 'primary' : 'default'"
              size="default"
            >
              {{ option.label }}
            </el-button>
          </div>
        </div>
        
        <!-- 主题颜色选择 -->
        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3">主题颜色</h3>
          <div class="flex gap-3 flex-wrap">
            <div 
              v-for="(color, name) in themeColorOptions" 
              :key="name"
              @click="setThemeColor(color)"
              class="w-12 h-12 rounded-lg cursor-pointer border-4 transition-all duration-200 hover:scale-110"
              :class="themeColor === color ? 'border-gray-400 shadow-lg' : 'border-gray-200'"
              :style="{ backgroundColor: color }"
              :title="`${name}: ${color}`"
            ></div>
          </div>
        </div>
        
        <!-- 自定义颜色输入 -->
        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3">自定义颜色</h3>
          <div class="flex gap-3 items-center">
            <input 
              type="color" 
              v-model="customColor"
              class="w-12 h-12 rounded-lg border cursor-pointer"
            >
            <el-input 
              v-model="customColor"
              placeholder="#646cff"
              class="w-32"
              @keyup.enter="setThemeColor(customColor)"
            />
            <el-button 
              type="primary"
              @click="setThemeColor(customColor)"
            >
              应用
            </el-button>
          </div>
        </div>
        
        <!-- 状态显示 -->
        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
          <h4 class="font-semibold mb-3">当前状态</h4>
          <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span class="text-gray-500">模式设置:</span>
              <span class="ml-2 font-mono">{{ themeMode }}</span>
            </div>
            <div>
              <span class="text-gray-500">实际模式:</span>
              <span class="ml-2 font-mono">{{ actualTheme }}</span>
            </div>
            <div>
              <span class="text-gray-500">系统偏好:</span>
              <span class="ml-2 font-mono">{{ systemTheme }}</span>
            </div>
            <div>
              <span class="text-gray-500">主题颜色:</span>
              <span class="ml-2 font-mono">{{ themeColor }}</span>
            </div>
          </div>
          
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full mr-2" :class="isDark ? 'bg-blue-500' : 'bg-green-500'"></div>
              <span class="text-sm">
                {{ isDark ? '🌙 深色模式已激活' : '☀️ 浅色模式已激活' }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Element Plus 组件展示 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <h3 class="text-xl font-bold mb-6">Element Plus 组件展示</h3>
        
        <!-- 按钮展示 -->
        <div class="mb-8">
          <h4 class="font-semibold mb-4">按钮组件</h4>
          <div class="space-y-4">
            <div class="flex gap-3 flex-wrap">
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
              <el-button type="info">信息按钮</el-button>
            </div>
            <div class="flex gap-3 flex-wrap">
              <el-button type="primary" plain>主要按钮</el-button>
              <el-button type="success" plain>成功按钮</el-button>
              <el-button type="warning" plain>警告按钮</el-button>
              <el-button type="danger" plain>危险按钮</el-button>
              <el-button type="info" plain>信息按钮</el-button>
            </div>
            <div class="flex gap-3 flex-wrap">
              <el-button type="primary" link>主要链接</el-button>
              <el-button type="success" link>成功链接</el-button>
              <el-button type="warning" link>警告链接</el-button>
              <el-button type="danger" link>危险链接</el-button>
              <el-button type="info" link>信息链接</el-button>
            </div>
          </div>
        </div>
        
        <!-- 表单组件 -->
        <div class="mb-8">
          <h4 class="font-semibold mb-4">表单组件</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <el-input v-model="testValue" placeholder="请输入内容"/>
            <div class="flex gap-4 items-center">
              <el-checkbox v-model="checked">复选框</el-checkbox>
              <el-radio v-model="radio" label="1">单选框</el-radio>
              <el-switch v-model="switchVal"/>
            </div>
          </div>
        </div>
        
        <!-- 标签组件 -->
        <div>
          <h4 class="font-semibold mb-4">标签组件</h4>
          <div class="flex gap-3 flex-wrap">
            <el-tag type="primary">主要标签</el-tag>
            <el-tag type="success">成功标签</el-tag>
            <el-tag type="warning">警告标签</el-tag>
            <el-tag type="danger">危险标签</el-tag>
            <el-tag type="info">信息标签</el-tag>
          </div>
          <div class="flex gap-3 flex-wrap mt-3">
            <el-tag type="primary" size="small">小号主要</el-tag>
            <el-tag type="success" size="small">小号成功</el-tag>
            <el-tag type="warning" size="small" closable>可关闭</el-tag>
          </div>
        </div>

        <!-- 卡片组件 -->
        <div>
          <h4 class="font-semibold mb-4">卡片组件</h4>
          <div class="flex gap-3 flex-wrap">
            <el-card>卡片内容</el-card>
            <el-card>卡片内容</el-card>
            <el-card>卡片内容</el-card> 

          </div>
          <div class="flex gap-3 flex-wrap">
            <div class="vilan-card">
              卡片内容
            </div>
            <div class="vilan-card">
              卡片内容
            </div>
            <div class="vilan-card">
              卡片内容
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useTheme } from '@/composables/useTheme'
  
  // 🚀 使用极简主题系统
  const { 
    themeMode,
    themeColor, 
    actualTheme, 
    systemTheme,
    isDark,
    setThemeMode,
    setThemeColor,
    initTheme,
    themeModeOptions,
    themeColorOptions
  } = useTheme()
  
  // 响应式数据
  const testValue = ref('')
  const checked = ref(false)
  const radio = ref('1')
  const switchVal = ref(false)
  const customColor = ref('#646cff')
  
  // 初始化主题系统
  initTheme()
  </script>